<template>
    <div>
      用户名: 
      <input type="text" v-model="form.name">
      <span :class="msgInfo.name === '校验成功' ? 'isGreen' : 'isRed' ">{{ msgInfo.name }}</span>
      <br>
      密码:
      <input type="password" v-model="form.password">
      <br>
      再次输入密码
      <input type="password" v-model="form.comPassword">
      <br>
      <button @click="toSignUp">注册</button>
  
  
    </div>
  </template>
  
  <script>
  export default {
    data(){
      return {
        form: {
          name: '',
          password: '',
          comPassword: ''
        },
        msgInfo: {
          name: '',
          password: '',
          comPassword: ''
        }
      }
    },
    watch: {
      'form.name'(newVal){
        this.msgInfo.name = /^[A-Z][A-Za-z0-9]{5,}$/.test(newVal) ? '校验成功': '校验失败:要求首字母大写,长度大于等于6'
      }
    },
    methods: {
      toSignUp(){
        // if (XX) {
        //   console.log();
        // }
      }
    }
  }
  </script>
  
  <style>
  .isRed {
    color: red;
  }
  .isGreen {
    color: green;
  }
  </style>